<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文章搜索</title>
    <link th:href="@{/webjars/jquery.3.4.1/jquery.js}" rel="stylesheet">
    <link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet">
    <link th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/article.css}" rel="stylesheet">
    <link th:href="@{/css/person.css}" rel="stylesheet">
    <link th:href="@{/css/head.css}" rel="stylesheet" >
    <link th:href="@{/css/foot.css}" rel="stylesheet">
    <link th:href="@{/css/bootstraps.css}" rel="stylesheet"/>
</head>

<body>
    <!--引入导航栏-->
    <div th:include="/common/head :: top"></div>
    <div style="clear: both;"></div>


    <!--中间的内容-->
    <form method="post" th:action="@{/search/article}">
        <div class="col-lg-6" style="margin-top: 30px;margin-left: 330px;">
            <span class="input-group">
                <input type="text" id="articleName" class="form-control" name="articleName"
                    placeholder="文章搜索...">
                <span class="input-group-btn">
                    <!--class="btn btn-outline-dark"-->
                    <button class="btn btn-success" type="submit" id="searchArticle">Go!</button>
                </span>
            </span>
        </div><br>
    </form><br><br>


    <hr style="border-bottom: 1px rgb(231, 231, 231) solid;width: 80%;text-align: center"/>


    <div class="ui top attached teal segment" th:if="${articles} != null and ${articleNumber} > 0"
         style="width: 66%; float: left; margin-left: 220px;">
        <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
            <div class="ui mobile reversed stackable grid" th:each="list : ${articles}" >
                <div class="eleven wide column">
                    <a th:href="@{'/article/detail/' + ${list.articleId}}">
                        <h3 class="ui header" th:text="${list.articleTitle}">这里是标题</h3>
                    </a>
                    <p class="m-text" th:text="${list.articleSummary}">这里是简介</p>
                    <div class="ui stackable grid">
                        <div class="eleven wide column">
                            <div class="ui mini horizontal link list">
                                <div class="item">
                                    <img th:src="@{${list.user.userProfilePhoto}}" alt="" class="ui avatar image">
                                    <div class="content"><a class="header">[[${list.user.userName}]]</a></div>
                                </div>
                                <div class="item">
                                    <i class="calendar icon"></i> [[${list.articleDate}]]
                                </div>
                                <div class="item">阅读数 [[${list.articleViewCount}]]</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="five wide column">
                    <a th:href="@{'/article/detail/' + ${list.articleId}}">
                        <img th:src="@{${list.articlePicture}}" alt="" class="ui rounded image">
                    </a>
                </div>
                <hr style="border-bottom: 1px rgb(231, 231, 231) solid; width: 100%"/>
            </div>

            <br><br>

            <div style="text-align: center" th:if="${articleName} != null and ${articleNumber} > 0">
                <ul class="pagination">
                    <li><a th:href="@{'/search/article'(articleName=${articleName},pageNum=1)}">首页</a></li>
                    <li><a th:href="@{'/search/article'(articleName=${articleName},pageNum=${pageInfo.hasPreviousPage}
                                ?${pageInfo.prePage}:1)}">上一页</a></li>
                    <li><a th:each="i : ${#numbers.sequence(1,pageInfo.pages)}"
                           th:href="@{'/search/article'(articleName=${articleName},pageNum=${i})}">[[${i}]]</a></li>
                    <li><a th:href="@{'/search/article'(articleName=${articleName},pageNum=${pageInfo.hasNextPage}
                                ?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></li>
                    <li><a th:href="@{'/search/article'(articleName=${articleName},pageNum=${pageInfo.pages})}">尾页</a></li>
                </ul>
            </div>

        </div>
    </div>




    <!--引入底部栏-->
    <div th:include="/common/foot :: foot"></div>
</body>
    <script th:src="@{/js/myJs/prism.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>

    <script>
        <!-- 模糊查询功能 -->
        // $('#searchArticle').click(function() {
        // function search() {
        //
        //     var articleName = $('#articleName').val();
        //     $.ajax({
        //         type: "POST",
        //         dataType: "json",
        //         url: "/search/article",
        //         data: $('#form').serialize(),
        //         success: function() {
        //             // 刷新页面
        //             alert("添加成功");
        //             location.reload();
        //         },
        //         error: function() {
        //             location.reload();
        //         }
        //     });
        // // });
        // }
    </script>

</html>